<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/week_target.css">
</head>
<body>
    <header class="header">
        <span><</span>
    </header>
    <main class="main">
        <ul>
            <li>为你推荐了每周目标:</li>
            <li>以周围单位追踪训练活动,你将不断接近理想中的身体状态</li>
            <li>
                <p>每周运动天数<span>0天</span></p>
                <div>
                    <span></span>
                    <div class="pro_btn"></div>
                </div>
            </li>
            <li>
                <p>每天运动时长<span>0分钟</span></p>
                <div>
                    <span></span>
                    <div class="pros_btn"></div>
                </div>
            </li>
        </ul>
        <p>目标从本周开始生效</p>
        <p>可在[我]-[每周目标]调整</p>
    </main>
    <footer class="footer">
        <button>确定</button>
    </footer>
    <script src="../../node_modules/jquery/dist/jquery.min.js">
    </script>
    <script>
        var weekstart=false;
        $(".pro_btn").on("touchstart",function(){
            weekstart=true;
        })
        $(".pro_btn").on("touchend",function(){
            weekstart=false;
        })
        $(".pro_btn").on("touchmove",function(e){
            if(weekstart){
                var touch=e.originalEvent.targetTouches[0];
                var _x=touch.pageX;
                var _pl=$(".pro_btn").parent().offset().left,_pw=$(".pro_btn").parent().width();
                var l=_x - _pl,r=_pw+_pl;
                if(l<=0){
                    l=0;
                }else if(_x>=r){
                    l=_pw;
                }
                $(".pro_btn").css("left",l);
                $(".pro_btn").prev().width(l);
                var day_num=Math.ceil((l/_pw)*7)
                $(".pro_btn").parent().prev().children().html(day_num+"天");
            }
        })
        var timestart=false;
        $(".pros_btn").on("touchstart",function(){
            timestart=true;
        })
        $(".pros_btn").on("touchend",function(){
            timestart=false;
        })
        $(".pros_btn").on("touchmove",function(e){
            if(timestart){
                var touch=e.originalEvent.targetTouches[0];
                var _x=touch.pageX;
                var _pl=$(".pros_btn").parent().offset().left,_pw=$(".pros_btn").parent().width();
                var l=_x - _pl,r=_pw+_pl;
                if(l<=0){
                    l=0;
                }else if(_x>=r){
                    l=_pw;
                }
                $(".pros_btn").css("left",l);
                $(".pros_btn").prev().width(l);
                var time_num=Math.ceil((l/_pw)*60)
                // console.log(time_num)
                $(".pros_btn").parent().prev().children().html(time_num+"分钟");
            }
        })
    </script>
</body>
</html>